import 'package:flutter/material.dart';
import 'package:flutter_project/common/route_page/route_name.dart';
import 'package:flutter_project/config/app_bar_view.dart';
import '../common/utils/image_picker_utils.dart';
import 'dart:io';

import '../common/utils/photo_view_utils.dart';
import '../config/theme_color.dart';

class PictureMainPage extends StatefulWidget {
  const PictureMainPage({super.key});

  @override
  State<PictureMainPage> createState() => _PictureMainPageState();
}

class _PictureMainPageState extends State<PictureMainPage> {
  String? choseImage;

  @override
  Widget build(BuildContext context) {
    return CommonAppWidget.navAppBar(
      isHiddenLeftArrow: true,
      title: '图片',
      rightActions: [
        Container(
          margin: const EdgeInsets.only(right: 15, top: 10, bottom: 10),
          height: 31,
          child: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: ThemeColor.appColor,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5)),
              textStyle: const TextStyle(color: Colors.white, fontSize: 13),
            ),
            child: const Text(
              '预览',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {
              if (choseImage != null) {
                RouteNames.push(
                  PhotoPreview(
                    galleryItems: [choseImage ?? ''],
                    defaultImage: 0,
                  ),
                );
              }
            },
          ),
        )
      ],
      childWidget: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              ImagePickerUtils.selectPhotoFromSheet(context,
                  callBackUrl: (image) {
                setState(() {
                  choseImage = image;
                });
              });
            },
            child: Container(
              height: 335,
              alignment: Alignment.center,
              decoration: choseImage != null
                  ? BoxDecoration(
                      image: DecorationImage(
                        image: FileImage(
                          File(choseImage ?? ''),
                        ),
                      ),
                    )
                  : const BoxDecoration(color: Colors.white),
              child: Visibility(
                visible: choseImage == null,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(
                      "assets/images/ic_qiyeminiPhoto.png",
                      width: 37,
                      height: 31,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    const Text(
                      '+添加内容图片',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 16,
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    const Text(
                      '高颜值的图片能帮助您获得更多的曝光',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 14,
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    const Text(
                      '建议宽高比例为1：1',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 14,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
